<template>
<Tabs :value="CurTabName" @on-click="onSelectTab">
    <TabPane label="个人信息" name="userInfoPlan">
        <Row class="UserInfoRow">
            <Col :xs="6" :md="6">姓名</Col>
             <Col :xs="18" :md="18">{{UserInfo.UserRealName}}</Col>
        </Row>
        <Row class="UserInfoRow">
            <Col :xs="6" :md="6">工号</Col>
             <Col :xs="18" :md="18">{{UserInfo.UserJobNum}}</Col>
        </Row>
        <Row class="UserInfoRow">
            <Col :xs="6" :md="6">手机号码</Col>
             <Col :xs="18" :md="18">{{UserInfo.UserMobilePhone}}</Col>
        </Row>
        <Row class="UserInfoRow">
            <Col :xs="6" :md="6">用户角色</Col>
             <Col :xs="18" :md="18">{{UserInfo.UserRuleName}}</Col>
        </Row>
         <Row class="UserInfoRow">
            <Col :xs="6" :md="6">所属组织</Col>
             <Col :xs="18" :md="18">{{UserInfo.UserOrgStructName}}</Col>
        </Row>
        
    </TabPane>
    <TabPane label="修改密码" name="rePwdPlan">
        <Form ref="EditForm" :model="FormData" label-position="top" :rules="ruleCustom">
            <Row>
                <Col :xs="24" :md="24">
                <FormItem label="新密码" prop="OldPwd" >
                    <Input v-model="FormData.OldPwd"></Input>
                </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                <FormItem label="重复密码" prop="RePwd">
                    <Input v-model="FormData.RePwd"></Input>
                </FormItem>
                </Col>
            </Row>
        </Form>

    </TabPane>
</Tabs>
</template>

<script>
import AppFrame from '../../libs/app-frame';
export default {
    name: 'cur-user-info',
    data: function() {
        const validatePass = (rule, value, callback) => {
            if (!value || value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.FormData.RePwd !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.EditForm.validateField('RePwd');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (!value || value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.FormData.OldPwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            UserInfo:{},
            FormData: {},
            ruleCustom:{
                OldPwd:[{ validator: validatePass, trigger: 'blur' }],
                RePwd:[{ validator: validatePassCheck, trigger: 'blur' }]
            },
            CurTabName: 'userInfoPlan',
        }
    },
    created(){
        this.getUserInfo();
    },
    methods: {
        onSelectTab(name) {
            this.CurTabName = name;
        },

        getUserInfo(){
            let self=this;
            let postData={};
            AppFrame.Http.Post("/manage-api/system/cur-user-info/getUserInfo",postData,function(err,ret){
                //console.log(ret);
                if(ret && ret.Result==1){
                    self.UserInfo=ret.Data;
                }
            })
        },

        onRePwd(cb) {
            let self = this;
            this.$refs["EditForm"].validate((valid) => {
                if (valid) {
                    AppFrame.Http.Post("/manage-api/system/cur-user-info/ReSetPwd", self.FormData, function(err, ret) {
                        
                        if(cb) cb(err,ret);
                    })
                } else {
                   // self.$Message.error('表单验证失败!');
                    if(cb) cb(false);
                }
            });
        }
    }
}
</script>

<style scoped>
.UserInfoRow{line-height: 30px}
</style>